import router from "../../router"
import api from "../../api"
import "../../style/index.css"
import "./index.css"
import * as d3 from "d3"
export default {
    // 全局属性--------------
    tableData:null,
    // 全局属性--------------
    template: `
        <div class="indexPageBox wh-100 ">
            <header class="indexPage w-100">
                <div class="indexPage-1 "></div>
                <div class="indexPage-2 flex-1">
                    <a href="#/china">中国地图/香港地图</a>
                    <a href="#/scatter">散点图/雷达图</a>
                    <a href="#/pie">仪表盘与饼图</a>
                    <a href="#/data-set">数据集</a>
                    <a href="#/bars">柱状图/折线图</a>
                    <a href="#/about">关于我们</a>
                </div>
                <div class="indexPage-3 ">
                    <p class="flex-1 center">用户:admin</p>
                    <button class="btn ">退出</button>
                </div>
            </header>
            <main class="indexPageBody wh-100">
                <article class="indexPageBody-1 flex-1">
                    <div class="indexPageBody-1-top">
                        <input type="text" class="search" placeholder="请输入要搜索的内容"/>
                        <button>新增管理员</button>
                    </div>
                    <table border="1" >
                        <thead>
                            <tr>
                                <th>用户名</th>
                                <th>角色</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                </article>
                <article class="indexPageBody-2 flex-1"></article>
            </main>
        </div>
        <div class="add-admin-page">
            <div class="wh-100">
                <div>
                    用户名： <input type="text" class="username">
                </div>
                <div>
                    密码： &nbsp;&nbsp;&nbsp;<input type="password" class="pwd">
                </div>
                <div>
                    角色：&nbsp;&nbsp;&nbsp;
                    <select class="role">
                        <option value="1" selected>超级管理员</option>
                        <option value="2">管理员</option>
                    </select>
                </div>
                <div>
                    <button class="page-admin-confirmdialog">确认</button>
                    <button class="page-admin-closedialog">取消</button>
                </div>
                
            </div>
        </div>
        <div class="edit-admin-page">
            <div class="wh-100">
                <div>
                    用户名： <input type="text" class="username">
                </div>
                <div>
                    角色：&nbsp;&nbsp;&nbsp;
                    <select class="role">
                        <option value="1" selected>超级管理员</option>
                        <option value="2">管理员</option>
                    </select>
                </div>
                <div>
                    <button class="edit-admin-confirm">确认</button>
                    <button class="edit-admin-close">取消</button>
                </div>
                
            </div>
        </div>
    `,
    

    // 渲染tbale表格
    renderTable(tableData){
        d3.select(".indexPageBody-1 tbody").html("");

            d3.select(".indexPageBody-1 tbody")
                .selectAll("tr")
                .data(tableData)
                .enter()
                .append("tr")
                .html((d) => {
                    return `
                    <td>${d.adminname}</td>
                    <td>${d.role == 1 ? "超级管理员" : "管理员"}</td>
                    <td>
                        <button class="edit" data-name="${d.adminname}" data-role="${d.role}">编辑</button>
                        <button class="delete" data-id="${d.adminid}" data-name="${d.adminname}">删除</button>
                    </td>
                `
                })
    },
    //绑定header中的退出按钮    
    bindExit() {
        d3.select('.indexPageBox .indexPage-3 .btn')
            .on("click", e => {
                localStorage.removeItem("token")
                router.push("/login")
            })
    },
    // 更新管理员数据
    async updateAdmin() {
        try {
            const { data: tableData } = await api.admin.getAdminList();

            this.tableData = tableData;
            this.renderTable(tableData);
            this.clearSearch();
        } catch (err) {
            alert("接口报错")
        } finally {

        }
    },

    // 删除 /编辑
    bindDelete() {
        d3.select('.indexPageBody-1 table')
            .on("click", e => {
                if (e.target.className === "delete") {
                    const isConfirm = confirm(
                        `您真的要删除 「${e.target.dataset.name}」 吗？？删除之后，数据无法恢复！`
                    );

                    // 当用户点击「取消」会执行本代码块
                    if (!isConfirm) {
                        return;
                    }
                    api.admin.deleteAdmin(e.target.dataset.id).then((res) => {
                        if (res.code == 200) {
                            alert("删除成功")
                            this.updateAdmin();

                        }
                    })
                }else if(e.target.className === "edit"){
                    this.openEditDialog();
                    const username = e.target.dataset.name;
                    const role = e.target.dataset.role
                    d3.select(".edit-admin-page .username").property("value",`${username}`);
                    d3.select(".edit-admin-page .role").property("value",`${role}`)
                    this.bindEditClose();
                    d3.select(".edit-admin-page .edit-admin-confirm")
                    .on("click",e=>{
                        if(d3.select(".edit-admin-page .username").property("value") !== username){
                            alert("用户名不能被修改");
                            d3.select(".edit-admin-page .username").property("value",`${username}`);
                            return
                        };
                        const now = d3.select(".edit-admin-page .role").property("value");
                        api.admin.editAdmin(username,now).then((res) =>{
                            if(res.code == 200){
                                alert("更改成功");
                                this.closeEditDialog();
                                this.updateAdmin();
                            }
                        })
                    })
                }
            })
    },
   
    // 编辑的取消按钮
    bindEditClose(){
        d3.select(".edit-admin-page .edit-admin-close")
        .on("click",e=>{
            this.closeEditDialog();
        })
    },

    // 给新增用户按钮绑定弹出新的对话框用来添加管理员数据
    bindClickAdd() {
        d3.select(".indexPageBody-1-top button")
        .on("click",(e)=>{
           this.openAddDialog();
        })
    },

    // 显示修改用户弹窗
    openEditDialog(){
        d3.select(".edit-admin-page").style("display","block");
    },

    // 关闭编辑窗口
    closeEditDialog(){
        d3.select(".edit-admin-page").style("display","none");
    },

    // 显示新增用户弹窗
    openAddDialog(){
        d3.select(".add-admin-page").style("display","block");
    },

    // 关闭新增用户弹窗
    closeAddDialog(){
        d3.select(".add-admin-page").style("display","none"); 
        d3.select(".add-admin-page .username").property("value", "");
        d3.select(".add-admin-page .pwd").property("value", "");
        d3.select(".add-admin-page .role").property("value", "1");
    },

    // 关闭编辑用户弹窗
    closeEditDialog(){
        d3.select(".edit-admin-page").style("display","none");
        
    },

    // 用户新增弹窗如果点击取消则关闭用户弹窗
    bindCloseDialog(){
        d3.select(".page-admin-closedialog")
        .on("click",(e) =>{
            this.closeAddDialog();
        })
    },

    // 新增管理员信息
    bindClickAddAdmin(){
        d3.select(".page-admin-confirmdialog").on("click",e =>{
            const username = d3.select(".add-admin-page .username").property("value");
            const pwd = d3.select(".add-admin-page .pwd").property("value");
            const role = d3.select(".add-admin-page .role").property("value");
            api.admin.addAdmin(username,pwd,role).then((res)=>{
                if(res.code == 200){
                    alert("添加成功，即将 更新 table")
                    this.closeAddDialog();
                    this.updateAdmin();
                }
            })
        })
    },

    // 绑定搜索框功能
    bindSearch(){
        document.querySelector(".indexPageBody .search").addEventListener("input",(e) =>{
            const searchVal = e.target.value;
            const reTable = this.tableData.filter((d) =>
                d.adminname.includes(searchVal)
            )
            this.renderTable(reTable);
        })
    },
    // 清除搜索框里的文字
    clearSearch(){
        d3.select(".indexPageBody .search").property("value","")
    },
    mounted() {
        this.bindExit();
        this.updateAdmin();
        this.bindDelete();
        this.bindClickAdd();
        this.bindCloseDialog();
        this.bindClickAddAdmin();
        this.bindSearch();

    }
}